<template>
	<view class="content">
		<view class="info" v-for="item in list">
			<view class="title">{{item.usage}}</view>
			<view class="cont">
				<view class="cont_l">
					<view class="">贷款总额</view>
					<view class=""><text>￥</text>{{item.borrow_amount}}</view>
					<!-- <view :class="item==1?'col_1': item==2?'col_2': 'col_3'">还款中</view> -->
					<view v-if="item.deal_status==0" class="col_1">待审核</view>
					<view v-if="item.deal_status==1" class="col_1">进行中</view>
					<view v-if="item.deal_status==2" class="col_1">满标</view>
					<view v-if="item.deal_status==3" class="col_3">流标</view>
					<view v-if="item.deal_status==4" class="col_1">还款中</view>
					<view v-if="item.deal_status==5" class="col_2">已还清</view>
				</view>
				<view class="line"></view>
				<view class="cont_r">
					<view>贷款人：{{item.name}}</view>
					<view class="phone" @click="call(item)">手机号：{{item.mobile}}
						<uni-icons color="#E99552" class="icon" type="phone" size="22"></uni-icons>
					</view>
					<!-- <view>年利率：{{item.rate}}%</view> -->
					<view>期限：{{item.repay_time}}</view>
					<view>完成度：{{item.completion}}%</view>
					<view>发布日期：{{item.start_date}}</view>
				</view>
			</view>
		</view>
		<image v-if="list.length<1" class="none" src="@/static/img/img_none.png" mode="widthFix"></image>
	</view>
</template>

<script>
	import {
		loanInfo,
		loanInfoTwo
	} from '@/common/js/index.js'
	export default {
		data() {
			return {
				list: [1, 2, 3],
				page: 1,
				isAll: false,
			}
		},
		onLoad() {
			this.info()
		},
		methods: {
			call(e) {
				uni.makePhoneCall({
					phoneNumber: e.mobile //仅为示例
				});
			},
			info() {
				loanInfoTwo({
					page: this.page,
					// deal_stauts: this.tabIndex? '4' :'5'
				}).then(res => {
					// this.list = res.data.wait_list.data

					var info = this.list
					if (this.page == 1) {
						this.list = res.data.wait_list.data
					} else {
						this.list = info.concat(res.data.wait_list.data)
					}
					this.isAll = this.list.length < 10 ? false : true
					console.log(res);
				})
			},
		},
		onReachBottom() {
			console.log(this.isAll);
			if (this.isAll) {
				this.page++;
				this.info()
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		/* background: white; */
		position: relative;
		overflow: hidden;
	}

	.info {
		padding: 0 30rpx;
		margin: 40rpx 30rpx;
		border-radius: 12rpx;
		background-color: white;

		.title {
			height: 106rpx;
			line-height: 106rpx;
			border-bottom: 2rpx solid #EEEEEE;
			font-weight: 500;
			font-size: 32rpx;
			color: #E99552;
		}

		.cont {
			display: flex;
			align-items: center;
			padding: 40rpx 0 48rpx;

			.cont_l {
				width: 260rpx;
				text-align: center;

				view {
					&:nth-of-type(1) {
						color: #999999;
					}

					&:nth-of-type(2) {
						font-weight: 500;
						font-size: 36rpx;
						margin-top: 14rpx;
						color: #FF534E;

						text {
							font-size: 24rpx;
						}
					}

					&:nth-of-type(3) {
						width: 116rpx;
						height: 52rpx;
						line-height: 52rpx;
						margin: 20rpx auto;
						border-radius: 4rpx;
					}
				}

				.col_1 {
					background: #FFF4E5;
					color: #E8A44D;
				}

				.col_2 {
					background: #E7FFF9;
					color: #34B695;
				}

				.col_3 {
					background: #EEEEEE;
					color: #999999;
				}
			}

			.cont_r {
				margin-left: auto;

				.phone {
					display: flex;
					align-items: center;

					.icon {
						margin-left: 6rpx;
					}
				}

				view {
					margin-bottom: 20rpx;

					&:last-child {
						margin: 0;
					}
				}
			}

			.line {
				width: 1rpx;
				height: 68rpx;
				border-left: 2rpx solid #EEEEEE;
			}
		}
	}

	.none {
		width: 440rpx;
		display: block;
		margin: 240rpx auto 0;
	}
</style>